<template>
    <div class="content-container" direction="vertical">
        <!-- input -->
        <div>
            <el-container class="content-row">
                <div class="input-tip">
                    商品名称:
                </div>
                <div class="input-field">
                    <el-input v-model="queryParams.name"></el-input>
                </div>
                <div class="input-tip">
                    商品编号(id):
                </div>
                <div class="input-field">
                    <el-input v-model="queryParams.id"></el-input>
                </div>
                <div class="input-tip">
                    商品类型:
                </div>
                <div class="input-field">
                    <el-select v-model="queryParams.category" placeholder="请选择类型">
                        <el-option v-for="item in categorys" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </div>
            </el-container>
            <el-container class="content-row">
                <div class="input-tip">
                    是否上架:
                </div>
                <div class="input-field">
                    <el-select v-model="sellModeString">
                        <el-option key="0" label="否" :value="0"></el-option>
                        <el-option key="1" label="是" :value="1"></el-option>
                        <el-option key="2" label="全部" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="input-tip">
                    是否过期:
                </div>
                <div class="input-field">
                    <el-select v-model="expModeString">
                        <el-option key="0" label="否" :value="0"></el-option>
                        <el-option key="1" label="是" :value="1"></el-option>
                        <el-option key="2" label="全部" :value="2"></el-option>
                    </el-select>
                </div>
            </el-container>
        </div>
        <!-- button -->
        <div class="content-row">
            <el-container>
                <el-button type="primary" @click="requestData">检索</el-button>
                <el-button type="primary" @click="showAll">显示全部</el-button>
                <el-button type="success" @click="addGood">新增商品</el-button>
            </el-container>
        </div>
        <!-- list -->
        <div>
            <el-table
            :data="goodsData"
            tooltip-effect="dark"
            style="width: 100%">
                <el-table-column
                label="商品图片"
                width="200">
                    <template #default="scope">
                        <div style="text-align:center">
                            <el-image :src="scope.row.gpicture" style="width: 120px; height: 120px"/></div>
                        <div style="text-align:center">{{scope.row.gname}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                label="商品id"
                width="100"
                prop="id">
                </el-table-column>
                <el-table-column
                label="原价/元"
                width="100"
                prop="goprice">
                </el-table-column>
                <el-table-column
                label="现价/元"
                width="100"
                prop="grprice">
                </el-table-column>
                <el-table-column
                label="商品库存/个"
                width="120"
                prop="gstore">
                </el-table-column>
                <el-table-column
                label="商品类型"
                width="100"
                prop="typename">
                </el-table-column>
                <el-table-column
                label="操作"
                width="120"
                prop="name">
                    <template #default="scope">
                        <el-button @click="operate(scope.row)" :type="scope.row.state ? 'danger':'success'">{{scope.row.state ? '下架':'上架'}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                label="是否推荐"
                width="100"
                prop="isRecommend" style="text-align:center">
                </el-table-column>
                <el-table-column
                label="修改商品"
                width="100">
                    <template #default="scope">
                        <el-button @click="updateGoods(scope.row.id)" type="info">修改</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                label="删除商品"
                width="100">
                    <template #default="scope">
                        <el-button @click="deleteGoods(scope.row.id)" type="primary">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Mock from '../../mock/Mock'
import axios from 'axios'
import Storage from '../../tools/Storage'
import {ElMessage} from 'element-plus'


export default{
    data(){
        return {
            goodsData:[],
            //模拟分类数据
            categorys:[
                "全部",
                "男装",
                "女装"
            ],
            queryParams:{
                name:"",
                id:"",
                category:"",
                sellMode:2, //0 否 1是 2全部
                expMode:2,
            },
            AUser:""
        }
    },
    computed:{
        sellModeString:{
            get(){
                if(this.queryParams.sellMode==2)
                    return '全部';
                return this.queryParams.sellMode==0?'否':'是';
            },
            set(val){
                this.queryParams.sellMode=val;
            }
        },
        expModeString: {
            get() {
                if (this.queryParams.expMode == 2) {
                    return '全部'
                }
                return this.queryParams.expMode == 0 ? '否' : '是'
            },
            set(val) {
                this.queryParams.expMode = val
            }
            
        }
    },
    // 组件挂载时获取数据
    mounted () {
        let toType=this.$route.params.type;
        // this.$message({
        //     type:'success',
        //     message:'筛选请求参数toType：' + toType
        // });

        this.AUser=Storage.state.userName;
        let targetURL='http://localhost:8888/goods/';
        if(toType==2) //type为2，则向后端查询推荐商品
            targetURL+="selectRecommendGoods";
        else    //type为0、1，则向后端查询所有商品
            targetURL+="showAllGoods";
        this.requestBackend(targetURL);
    
    },
    // 路由更新时刷新数据
    beforeRouteUpdate (to) {
        let targetURL='http://localhost:8888/goods/';
        if(to.params.type==2) //type为2，则向后端查询推荐商品
            targetURL+="selectRecommendGoods";
        else    //type为0、1，则向后端查询所有商品
            targetURL+="showAllGoods";
        this.requestBackend(targetURL);
      
    },
    methods: {
        // 获取数据的方法
        requestData() {
            
            // this.goodsData = Mock.getGoods(this.$route.params.type);

            if(this.queryParams.name=="" || this.queryParams.id=="")
                this.$message({
                    type:'error',
                    message:'筛选请求参数：' + JSON.stringify(this.queryParams)+"\t请求参数不全，请重新输入！"
                });
            else{
                this.$message({
                    type:'success',
                    message:'筛选请求参数：' + JSON.stringify(this.queryParams)
                });

                let baseURL='http://localhost:8888';
                
                let gname=this.queryParams.name;
                let gid=parseInt(this.queryParams.id);
                
                let targetURL=baseURL+'/goods/selectGoodsByGnameAndGid?gname='+gname+"&gid="+gid;
                this.requestBackend(targetURL);
            }
        },
        // 进行上架下架操作
        operate(item) {
            item.state = !item.state;
        },
        // 清空筛选项
        clear() {
            this.queryParams = {
                name:"",
                id:"",
                category:"",
                sellMode:2, 
                expMode:2,
            }
            this.goodsData=Mock.getGoods(this.$route.params.type);
        },
        showAll(){
            let targetURL='http://localhost:8888/goods/showAllGoods';
            this.requestBackend(targetURL);
        },
        requestBackend(targetURL){//请求后端数据
            let baseURL='http://localhost:8888';
            axios.get(targetURL)
            .then(successResponse=>{
                this.goodsData=successResponse.data;
                
                for(let i=0;i<this.goodsData.length;i++){
                    let goodImgPath=baseURL+"/images/"+this.goodsData[i].gpicture;
                    this.goodsData[i].gpicture=goodImgPath;
                    this.goodsData[i].isRecommend=(this.goodsData[i].isRecommend==0)?"否":"是";
                }
        
            }).catch(failResponse=>{
                alert("响应异常");
            })
        },
        // 新增商品
        addGood() {
            this.$router.push({name:'AddGood',params:{type:this.$route.params.type}})
        },
        updateGoods(gid){
            this.$router.push({name:'updateGood',params:{gid:gid}})
                // ElMessage({
                //     type:'success',
                //     message:"updatedGood's id:"+gid
                // });
        },
        deleteGoods(gid){
            let baseURL='http://localhost:8888/goods/delete?id='+gid;
            axios.get(baseURL)
            .then(successResponse=>{
                if(successResponse.data=="ok"){
                    ElMessage({
                        type:'success',
                        message:"删除商品成功！"
                    });

                    let targetURL='http://localhost:8888/goods/showAllGoods';
                     this.requestBackend(targetURL);
                }else{
                    ElMessage({
                        type:'error',
                        message:"删除商品失败: 存在关联的订单，无法删除！"
                    });
                }
            }).catch(failResponse=>{
                alert("响应异常");
            })
        },

    }
}
</script>






